<template>
    <div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in swiperimg" :key="index">
            <img :src="item" alt="">
          </div>
        </div>

        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
      <div class="vote-tit">
        <p>{{title2}}</p>
        <div class="vt-fot">
          <p>
            <span>参与人数:{{partake_num<10?0+partake_num:partake_num}}</span>
            <span>总投票数:{{partake_vote<10?0+partake_vote:partake_vote}}</span>
          </p>
          <p>
            <span>参赛人数:{{contestant<10?0+contestant:contestant}}</span>
            <span>总投票数:{{contestant_vote<10?0+contestant_vote:contestant_vote}}</span>
          </p>
          <p>
            <span>节目数量:{{program<10?0+program:program}}</span>
            <span>总投票数:{{program_vote<10?0+program_vote:program_vote}}</span>
          </p>
        </div>
      </div>

      <router-view></router-view>
    </div>
</template>

<script>
  import Swiper from 'swiper'
  import * as list from "../../../api/list.js";
    export default {
      name: "Vote",
      data(){
        return {
          swiperimg:[],
          title2:'',
          partake_num:'',
          partake_vote:'',
          contestant:'',
          contestant_vote:'',
          program:'',
          program_vote:''
        }
      },
      beforeMount(){
        let parmes2 = {id:this.$route.params.id3};
        list.activeDetail(parmes2).then(res=>{
          this.title2 = res.data.title;
          this.swiperimg = res.data.main_pic;
          this.$nextTick(() => {  // 下一个UI帧再初始化swiper
            var swiper = new Swiper('.swiper-container', {
              autoplay:true,
              loop : true,
              pagination: {
                el: '.swiper-pagination',
              },
            });
          })
        });

        let parmes3 = {active_id:this.$route.params.id3};
        list.activePoll(parmes3).then(res=>{
          //console.log(res.data);
          this.partake_num = res.data.partake_num;
          this.partake_vote = res.data.partake_vote;
          this.contestant = res.data.contestant;
          this.contestant_vote = res.data.contestant_vote;
          this.program = res.data.program;
          this.program_vote = res.data.program_vote;
        });
      },
      mounted(){
        mui.back = function() {
          window.history.go(-1);
        }
      }
    }
</script>

<style scoped>
  .vote-tit{
    padding: 20px 40px;
  }
 .vote-tit>p{
   font-size: 32px;
   font-weight: bold;
 }
  .vote-tit .vt-fot{
    margin: 20px 0;
    border: 1px solid #dcdcdc;
    padding: 20px;
  }
  .vote-tit .vt-fot p{
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
  }
  .vote-tit .vt-fot p:last-child{
    padding-bottom: 0;
  }
  .vote-tit .vt-fot p span{
    font-size: 26px;
  }
  .vote-tit .vt-fot p span:nth-child(2){
    text-align: right;
  }



</style>
